<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<%@include file="/WEB-INF/views/common/header.jsp" %>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	<div class="show-top-grids">
		<div class="main-grids about-main-grids">
			<h4>用户列表</h4>
			<div class="recommended-info">
				<hr class="layui-bg-green">
				<form class="form-inline" class="layui-form layui-form-pane" method="post"
				      action='<c:url value="/user/list"/>'>
					<div class="row bs-example">
						<div class="form-group col-md-2">
							<input type="text" id="userName" name="userName" placeholder="输入用户名" autocomplete="off"
							       value="${response.query.userName}" class="layui-input">
						</div>
						<div class="form-group col-md-2">
							<input type="text" id="phone" name="phone"
							       placeholder="电话" autocomplete="off"
							       value="${response.query.phone}" class="layui-input">
						</div>
						<div class="form-group col-md-2">
							<input type="text" id="schoolName" name="schoolName"
							       placeholder="学校名称" autocomplete="off"
							       value="${response.query.schoolName}" class="layui-input">
						</div>
						<div class="form-group col-md-2">
							<select id="gender" name="gender" class="layui-input">
								<option value="">请选择</option>
								<option value="true">男</option>
								<option value="false">女</option>
							</select>
						</div>
						<div class="form-group col-md-2">
							<select id="partExperience" name="partExperience" class="layui-input">
								<option value="">无</option>
								<option value="1">1年以下</option>
								<option value="2">1到3年</option>
								<option value="3">3到5年</option>
								<option value="4">5年以上</option>
							</select>
						</div>
					</div>


					<div class="row bs-example" style="margin-top: 1em;">
						<div class="form-group col-md-2">
							<button class="layui-btn" id="query" type="submit">查询</button>
							<button type="button" class="layui-btn layui-btn-primary" onclick="createUser();">添加用户
							</button>
						</div>
					</div>


					<div class="about-grids" style="margin-top: 2em;">
						<table class="layui-table">
							<thead>
							<tr>
								<th style="width:10%;">ID</th>
								<th style="width:10%;">用户名</th>
								<th style="width:10%">电话</th>
								<th style="width:10%">性别</th>
								<th style="width:10%">身高</th>
								<th style="width:10%">黑名单</th>
								<th style="width:10%">兼职类型</th>
								<th style="width:10%">当前学历</th>
								<th style="width:10%">操作</th>
							</tr>
							</thead>
							<tbody>
							<c:forEach items="${response.data}" var="user" varStatus="status">
								<tr>
									<td>${user.id}</td>
									<td>${user.userName}</td>
									<td>${user.phone}</td>
									<td>
										<c:if test="${user.gender == true}">男</c:if>
										<c:if test="${user.gender == false}">女</c:if>
									</td>
									<td>
										<c:if test="${user.stature != null && user.stature > 0}">
											${user.stature}cm
										</c:if>
									</td>
									<td>
										<c:if test="${user.black == false}">否</c:if>
										<c:if test="${user.black == true}">是</c:if>
											<%--<input type="checkbox" class="switch" data-on-label="SI"--%>
											<%--<c:if test="${user.black!=true}">checked</c:if>--%>
											<%--value="${user.id}"/>--%>
									</td>
									<td>
										<c:if test="${user.postType == 1}">兼职</c:if>
										<c:if test="${user.postType == 2}">全职</c:if>
									</td>
									<td>
										<c:if test='${user.postType == "1"}'>高中</c:if>
										<c:if test='${user.postType == "2"}'>大专</c:if>
										<c:if test='${user.postType == "3"}'>本科</c:if>
										<c:if test='${user.postType == "4"}'>硕士</c:if>
										<c:if test='${user.postType == "5"}'>博士</c:if>
										<c:if test='${user.postType == "6"}'>其他</c:if>
									</td>
									<td>
										<div class="layui-table-cell laytable-cell-1-9">
											<a onclick="edit(${user.id})"
											   class="href-a layui-btn layui-btn-small">修改用户</a>
											<c:if test="${user.black==false}">
												<a onclick="setBlack(${user.id},'${user.userName}')"
												   class="href-a layui-btn layui-btn-small">加入黑名单</a>
											</c:if>
											<c:if test="${user.black==true}">
												<a onclick="removeBlack(${user.id})"
												   class="href-a layui-btn layui-btn-small">移除黑名单</a>
											</c:if>
											<a onclick="deleteUser(${user.id});"
											   class="layui-btn layui-btn-danger layui-btn-small">删除</a>
										</div>
									</td>
								</tr>
							</c:forEach>
							</tbody>
						</table>
					</div>
					<div>
						<jsp:include page="/WEB-INF/views/common/pagination.jsp"/>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<div id="blacklistContainer" style="display: none;" class="site-text site-block">
	<div class="recommended-info" pane="">
		<form id="blacklistForm" name="blacklistForm">
			<div style="margin-top: 1em;" class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" readonly="readonly" id="blackUserName" placeholder="姓名" autocomplete="off"
						       value="" class="layui-input"/>
						<input type="hidden" id="blackId" name="userId" value=""/>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">日期</label>
					<div class="layui-input-inline">
						<input type="text" readonly="readonly" name="terminalTime" id="terminalTime"
						       placeholder="日期"
						       autocomplete="off" value="" class="layui-input"/>
					</div>
					<div class="layui-input-inline" style="color:#FF5722;">
						不填默认永久黑名单
					</div>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block layui-col-sm8" style="margin-left:0;">
					<textarea name="remark" id="blacklistRemark" placeholder="备注" class="layui-textarea"></textarea>
				</div>
			</div>
		</form>

	</div>
</div>
</body>

<script type="application/javascript">
	layui.use(['layer', 'laydate'], function () {
		window.layer = layui.layer;
		var laydate = layui.laydate;
		laydate.render({
			elem: '#terminalTime'
			, min: 1
		});
	});

	/*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/user/list']");
	$nav_a.parent().addClass("active");
	$nav_a.parent().parent().css("display", "block");

	$(document).ready(function () {
		initPage();
	});


	/*创建用户*/
	function createUser() {
		window.open('<c:url value="/user/create"/>');
	}
	/*编辑用户*/
	function edit(id) {
		window.open('<c:url value="/user/edit"/>?userId=' + id + '');
	}

	/**
	 * 删除用户
	 * @param id
	 */
	function deleteUser(id) {
		window.layer.confirm('确定删除用户？', {btn: ['删除', '取消']}, function () {
			$.ajax({
				url: '<c:url value="/user/delete"/>',
				dataType: 'json',
				type: 'post',
                data: {userId: id},
				success: function (data) {
					if (data.code !== "200") {
						window.layer.msg(data.message, {icon: 5, anim: 6});
					} else {
						$("#query").click();
					}
				}, error: function () {

				}
			});
		}, function () {
		});
	}


    /**
     * 设置黑名单
     * @param id
     * @param userName
     */
	function setBlack(id, userName) {
		$("#blackId").val(id);
		$("#blackUserName").val(userName);
		var index = window.layer.open({
			type: 1
			, area: ['500px', '400px']
			, title: '设置黑名单'
			, shade: 0.6
			, anim: 1
			, content: $('#blacklistContainer')
			, btn: ['添加黑名单', '取消']
			, yes: function () {
				var formData = $('#blacklistForm').serializeObject();
				formData = JSON.stringify(formData);
				$.ajax({
					url: '<c:url value="/user/addBlack"/>',
					dataType: 'json',
					type: 'post',
					data: formData,
					contentType: "application/json",
					error: function () {
					},
					success: function (data) {
						if (data.code !== "200") {
							window.layer.msg(data.message, {icon: 5, anim: 6});
						} else {
							window.layer.msg("加入黑名单成功！", {icon: 6, anim: 6});
							window.layer.close(index);
                            $("#query").click();
						}
					}
				});
			}
			, btn2: function () {
				$("#blacklistForm input").val("");
				$("#blacklistForm textarea").val("");
				window.layer.close(index);
			}
			, cancel: function () {
				$("#blacklistForm input").val("");
				$("#blacklistForm textarea").val("");

			}
		});

	}


    /**
     * 移除黑名单
     * @param id
     */
    function removeBlack(id) {
        window.layer.confirm('确定移除黑名单？', {btn: ['移除', '取消']}, function () {
            $.ajax({
                url: '<c:url value="/user/removeBlack"/>',
                dataType: 'json',
                type: 'post',
                data: {userId: id},
                success: function (data) {
                    if (data.code !== "200") {
                        window.layer.msg(data.message, {icon: 5, anim: 6});
                    } else {
                        $("#query").click();
                    }
                }, error: function () {

                }
            });
        }, function () {
        });
    }



	function initPage() {
		$("#gender").val("${response.query.gender}");
		$("#postType").val("${response.query.postType}");
		$("#partExperience").val("${response.query.partExperience}");
	}


</script>


</html>
